@import 'theme';
@import 'functions';
@import 'mixins';

//cx-cart-item-list color variables
$cx-cart-item-list-header-color: 'secondary' !default;
$cx-cart-item-list-header-border-color: 'light' !default;
$cx-cart-item-list-row-border-color: 'light' !default;

//cx-cart-item-list variables
$cx-cart-item-list-header-margin: 0 !default;
$cx-cart-item-list-header-padding: 1.125rem 0 !default;
$cx-cart-item-list-header-border-bottom: 1px solid !default;
$cx-cart-item-list-header-desc-padding-left: 0 !default;
$cx-cart-item-list-header-desc-padding-right: 0 !default;
$cx-cart-item-list-header-price-padding-left: 0 !default;
$cx-cart-item-list-header-total-padding-right: 0 !default;
$cx-cart-item-list-header-padding-md: 1.125rem 2.5rem !default;

$cx-cart-item-list-row-padding: 1.25rem 0 !default;
$cx-cart-item-list-row-border-bottom: 1px solid !default;

$cx-cart-item-list-item-padding-md: 0 2.5rem !default;
$cx-cart-item-list-item-padding-sm: 0 0 0 1rem !default;

.cx-cart-item-list {
  &__header {
    @include type('8');
    margin: $cx-cart-item-list-header-margin;
    padding: $cx-cart-item-list-header-padding;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    @include var-color('color', $cx-cart-item-list-header-color);

    border-bottom: $cx-cart-item-list-header-border-bottom;
    @include var-color(
      'border-bottom-color',
      $cx-cart-item-list-header-border-color
    );

    &--desc {
      text-align: left;
      padding-left: $cx-cart-item-list-header-desc-padding-left;
      padding-right: $cx-cart-item-list-header-desc-padding-right;
    }

    &--price,
    &--qty {
      text-align: center;

      @include media-breakpoint-down(md) {
        text-align: left;
      }
    }

    &--total {
      text-align: right;
      padding-right: $cx-cart-item-list-header-total-padding-right;
    }
  }

  &__row {
    padding: $cx-cart-item-list-row-padding;
    border-bottom: $cx-cart-item-list-row-border-bottom;
    @include var-color(
      'border-bottom-color',
      $cx-cart-item-list-row-border-color
    );
  }

  // ------------------------------------ MEDIA QUERIES ------------------------------------

  @include media-breakpoint-down(md) {
    .cx-cart-item-list__header {
      padding: $cx-cart-item-list-header-padding-md;
    }

    .cx-cart-item-list__item {
      padding: $cx-cart-item-list-item-padding-md;
    }
  }

  @include media-breakpoint-down(sm) {
    .cx-cart-item-list__item {
      padding: $cx-cart-item-list-item-padding-sm;
    }
  }
}
